<template>
	<div class="app-container">
		<div style="display: flex; justify-content: flex-end;">
			<el-button @click.stop="back()" class="bac6b7" type="primary"><i class="el-icon-back" />返回列表</el-button>
		</div>
		<div v-if="list" style="width: 840px; margin: 0 auto;">
			<div class="wid100" style="background: #f2f2f2;min-height: 42px;line-height: 32px;">
				<div class="dis disJuB" style="padding: 5px 15px;">
					<label class="fl label" style="font-size: 14px;"><span style="color: red;">*</span> 公告名称</label>
					<div class="fr notice-text-title">{{list.title}}</div>
				</div>
			</div>
			<div class="wid100" style="background: #f2f2f2; margin-top: 10px;">
				<div class="dis disJuB" style="padding: 5px 15px;">
					<label class="fl label" style="font-size: 14px;line-height: 1.8;"><span style="color: red;">*</span>
						公告详情</label>
					<div class="fr notice-text-content">{{list.content}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		noticeDetails
	} from '@/api/staff'; // Secondary package based on el-pagination
	export default {
		name: 'noticeDetail',
		components: {},
		data() {
			return {
				id: '',
				list: {}
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var query = this.$route.query
			this.id = query.id
			var xuanList = [{
				name: '公告详情',
				url: '/venue/noticeDetail?id=' + this.id,
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getList()
		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			getList() {
				noticeDetails({
					'id': this.id
				}).then(response => {
					const {
						data
					} = response
					this.list = data
				}).catch(error => {
					console.log(error)
				})
			},
			handleSelectionChange(val) {
				console.log(val.length)
				this.xuancount = val.length
				this.multipleSelection = val
			}
		}
	}
</script>

<style scoped>
	.app-container {
		font-size: 14px;
	}

	.footer-btn-group {
		padding: 40px 0;
		text-align: center;
		margin: 0 auto;
		width: 200px;
	}

	/deep/ .el-input__inner {
		//width: 190px;
		height: 32px;
	}

	/deep/ .el-textarea__inner {
		//width: 190px;
		height: 168px;
	}

	.notice-text-content {
		line-height: 1.8;
		white-space: pre-wrap;
	}

	.notice-text-title,
	.notice-text-content {
		width: 705px;
		float: right;
	}
</style>